<template>
  <el-dialog
    :model-value="modelValue"
    :title="dialogTitle"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" />
      </el-form-item>

      <el-form-item label="菜单图标" prop="menuIcon">
        <el-input v-model="form.menuIcon" />
      </el-form-item>

      <el-form-item label="菜单路径" prop="menuPath">
        <el-input v-model="form.menuPath" />
      </el-form-item>

      <el-form-item label="组件路径" prop="menuComponent">
        <el-input v-model="form.menuComponent" />
      </el-form-item>

      <el-form-item label="菜单类型" prop="menuType">
        <el-select v-model="form.menuType" placeholder="请选择菜单类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="排序号" prop="menuSortNo">
        <el-input-number v-model="form.menuSortNo" :min="0" />
      </el-form-item>

      <el-form-item label="权限标识" prop="menuAuthority">
        <el-input v-model="form.menuAuthority" />
      </el-form-item>

      <el-form-item label="父级菜单" prop="menuParentId">
        <el-select v-model="form.menuParentId" placeholder="请选择菜单类型">
          <el-option :value="1" label="顶级菜单" />
          <el-option
            v-for="item in topMenuOptions"
            :key="item.menuId"
            :label="item.menuName"
            :value="item.menuId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否隐藏" prop="menuHide">
        <el-switch v-model="form.menuHide" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  defineEmits,
  ref,
  defineProps,
  watch,
  onUnmounted,
  onMounted,
} from "vue";
import { createMenu, updateMenu, getTopMenus } from "@/api/menu";
import { ElMessage } from "element-plus";
import { rules, defaultForm, typeOptions } from "../options";

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogTableValue: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref(null);
const form = ref({ ...defaultForm });
const topMenuOptions = ref([]);

// 获取顶级菜单
onMounted(async () => {
  const res = await getTopMenus();
  topMenuOptions.value = res.data.data;
});

// 监听表单数据变化
watch(
  () => props.dialogTableValue,
  (newVal) => {
    if (newVal) {
      form.value = { ...defaultForm, ...newVal };
    }
  },
  { deep: true, immediate: true }
);

const emits = defineEmits(["update:modelValue", "initGetList"]);

const handleClose = () => {
  emits("update:modelValue", false);
};

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (props.dialogTitle === "添加菜单") {
          await createMenu(form.value);
        } else {
          await updateMenu(form.value);
        }

        ElMessage({
          message: props.dialogTitle === "添加菜单" ? "添加成功" : "更新成功",
          type: "success",
        });

        emits("initGetList");
        handleClose();
      } catch (error) {
        console.error("操作失败:", error);
      }
    } else {
      console.log("表单验证失败");
      return false;
    }
  });
};
</script>

<style scoped>
.dialog-footer {
  padding: 20px 0 0;
  text-align: right;
}
</style>
